<template>

  <!-- 主体内容 -->
  <div class="mian-content">
    <!-- 左侧需求列表 -->
    <div class="main-left">
      <div class="space-y-4 mb-4">
        <div class="relative">
          <input @keyup.enter="handleSearch" v-model="reqPageInfoRequirement.keyword" type="text" placeholder="搜索需求..."
            class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-100 border-none text-sm" />
          <el-icon class="absolute left-3 top-2.5 text-gray-400">
            <Search />
          </el-icon>
        </div>
        <div class="relative">
          <input @keyup.enter="fetchBugs2" v-model="bugId" type="text" placeholder="用BugId搜索..."
            class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-100 border-none text-sm" />
          <el-icon class="absolute left-3 top-2.5 text-gray-400">
            <Search />
          </el-icon>
        </div>
        <div class="flex space-x-2">
          <el-button size="small" :type="requirementFilter === 1 ? 'primary' : 'default'"
            @click="filteredRequirements(1)" class="!rounded-button whitespace-nowrap">全部需求</el-button>
          <el-button size="small" :type="requirementFilter === 2 ? 'primary' : 'default'"
            @click="filteredRequirements(2)" class="!rounded-button whitespace-nowrap">问题反馈</el-button>
        </div>
      </div>
      <div class="main-left-content">
        <div v-for="(requirement, index) in requirements" :key="index"
          :class="['main-left-content-li rounded-lg cursor-pointer transition-all shadow boxShadow',
            selectedReq === index ? 'bg-blue-50 border-2 border-blue-500 shadow-md border-color-blue' : 'border-2 border-transparent hover:border-gray-200 hover:shadow-md transform hover:scale-[1.02]']"
          @click="onSelectRequirement(index)">
          <div class="flex justify-between items-start mb-2">
            <div class="flex items-center gap-2">
              <h3 class="font-medium">{{ requirement.requirementName }}</h3>
              <!-- 优先图标 -->
              <!-- <el-icon class="text-gray-400 hover:text-yellow-400 cursor-pointer transition-colors"
                  :class="{ 'text-yellow-400': requirement.starred }" @click.stop="toggleStar(index)">
                  <Star v-if="requirement.starred" :fill="true" />
                  <Star v-else />
                </el-icon> -->
            </div>
            <el-tag :type="requirement.bugCount > 0 ? 'danger' : 'success'" size="small">{{
              requirement.bugCount > 0 ? "存在BUG" : "无bug" }}</el-tag>
          </div>
          <div class="text-sm text-gray-500 mb-2">需求编号：{{ requirement.id }}</div>
          <div class="text-sm text-gray-500">Bug 数量：<b style="color: #F56C6C">{{ requirement.bugCount }}</b></div>
        </div>
        <!-- 分页数据 -->
        <div class="mt-4 flex justify-center">
          <el-pagination v-model:current-page="reqPageInfoRequirement.page" :page-size="reqPageInfoRequirement.pageSize"
            :total="total" layout="prev, pager, next" @current-change="handlePageChange" />
        </div>
      </div>
    </div>
    <!-- 右侧Bug展示区 -->
    <div class="main-right">
      <div class="space-y-4 mb-6">
        <div class="flex justify-between items-start">
          <div>
            <h2 class="text-2xl font-bold mb-2 text-gray-800 flex items-center">
              <span class="inline-block w-1 h-6 bg-blue-500 rounded mr-3"></span>
              {{ selectedRequirementName }}
            </h2>
            <p class="text-sm text-gray-500 ml-4">共 <b style="color: #F56C6C;">{{ bugTotal }}</b> 个缺陷</p>
          </div>
          <el-button type="success" class="!rounded-button whitespace-nowrap" @click="OpenAddBugDialog"
            style="margin-left: 10px;">
            <el-icon class="mr-1">
              <Plus />
            </el-icon>新建 Bug
          </el-button>
        </div>
        <div class="relative  w-full max-w-xl">
          <input @keyup.enter="handleBugSearch" v-model="bugKeyWord" type="text" placeholder="搜索bug..."
            class="w-full pl-10 pr-4 py-2 rounded-lg bg-gray-100 border-none text-sm" />
          <el-icon class="absolute left-3 top-2.5 text-gray-400">
            <Search />
          </el-icon>
        </div>
        <div class="bg-gray-50 rounded-lg p-3 space-y-2.5">
          <!-- Bug等级 -->
          <div class="flex items-center space-x-2">
            <span>优先级</span>
            <div class="flex space-x-2">
              <el-button v-for="priority in PRIORITY_COLORS" :key="priority.value" size="small"
                :style="{ backgroundColor: bugLevel === priority.value ? priority.bgColor : 'transparent', color: bugLevel === priority.value ? priority.textColor : '' }"
                @click="bugLevel = priority.value; onFilterChange()" class="!rounded-button whitespace-nowrap">
                {{ priority.label }}
              </el-button>
            </div>
          </div>

          <!-- 处理状态筛选 -->
          <div class="flex items-center space-x-2">
            <span style="min-width: 60px;">处理状态</span>
            <div>
              <!-- 全部按钮 -->
              <el-button size="small" :type="statusFilter === 0 ? 'primary' : 'default'"
                @click="statusFilter = 0; onFilterChange()" class="!rounded-button whitespace-nowrap">
                全部
              </el-button>

              <!-- 动态渲染状态按钮 -->
              <el-button v-for="status in bugStatusList" :key="status.ID" size="small" :style="{
                backgroundColor: statusFilter === status.bug_status ? status.bugStatusColor : 'transparent',
                color: statusFilter === status.bug_status ? '#fff' : '#000', // 默认黑色，选中后白色
              }" :type="statusFilter === status.bug_status ? 'primary' : 'default'"
                @click="statusFilter = status.bug_status; onFilterChange()" class="!rounded-button whitespace-nowrap">
                {{ status.bug_status_name }}
              </el-button>
            </div>
          </div>

          <!-- 负责人筛选 -->
          <div class="flex items-center space-x-2">
            <span>负责人</span>
            <div class="flex space-x-2">
              <el-button size="small" :type="inPersiionFilter === 0 ? 'primary' : 'default'"
                @click="inPersiionFilter = 0; onFilterChange()" class="!rounded-button whitespace-nowrap">
                所有人
              </el-button>
              <el-button size="small" :type="inPersiionFilter === 1 ? 'primary' : 'default'"
                @click="inPersiionFilter = 1; onFilterChange()" class="!rounded-button whitespace-nowrap">
                我的
              </el-button>
            </div>
          </div>

          <!-- Bug 列表 -->
          <div class="grid grid-cols-3 gap-4">
            <div v-for="(bug, index) in bugs" :key="index"
              class="p-4 rounded-lg border-2 border-gray-200 shadow boxShadow hover:border-blue-500 hover:shadow-lg transition-all cursor-pointer transform hover:scale-[1.02] hover:-translate-y-1"
              @click="showBugDetail(bug)">
              <div class=" flex justify-between items-start mb-3">
                <div>
                  <h3 class="font-medium mb-1">{{ bug.bugTitle }}</h3>
                  <div class="text-sm text-gray-500">Bug-{{ bug.id }}</div>
                </div>
                <div class="flex items-center space-x-2">
                  <!-- 显示 Bug 等级 -->
                  <el-tag
                    :style="{ backgroundColor: getBugLevelColor2(bug.bugLevel), color: getBugLevelTextColor2(bug.bugLevel) }"
                    size="small">
                    {{ getBugLevelName2(bug.bugLevel) }}
                  </el-tag>
                  <!-- 动态显示 Bug 状态 -->
                  <el-tag :style="{
                    backgroundColor: getBugStatusColor(bug.bugStatus),
                    color: '#fff',
                    minWidth: '80px', // 设置最小宽度
                    textAlign: 'center', // 文字居中
                  }" size="small">
                    {{ getBugStatusName(bug.bugStatus) }}
                  </el-tag>
                </div>
              </div>
              <div class="flex justify-between items-center text-sm text-gray-500">
                <div class="flex items-center space-x-2">
                  <!-- 显示负责人头像和名字 -->
                  <div class="flex -space-x-2">
                    <div v-for="assignee in bug.editUserName" :key="assignee"
                      class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs border-2 border-white">
                      {{ assignee.charAt(0) }}
                    </div>
                  </div>
                  <span>{{ bug.editUserName.join(', ') }}</span>
                </div>
                <span>{{ bug.createTime }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页数据 -->
      <div class="mt-4 flex justify-center">
        <el-pagination v-model:current-page="bugFilter.page" :page-size="bugFilter.pageSize" :total="bugTotal"
          layout="prev, pager, next" @current-change="handleBugListPageChange" />
      </div>
    </div>
  </div>

  <!-- Bug详情弹窗 -->
  <el-dialog v-model="showDetailDialog" title="Bug 详情" width="800px" @close="selectedBug = null"
    style="height: 800px;margin-top: 3vh;">
    <div v-if="selectedBug">
      <div class="bug-title">
        <h3>{{ selectedBug.bugTitle }}</h3>
      </div>
      <!-- 基本信息 -->
      <div class="bug-info">
        <!-- 优先级选择 -->
        <span @click.stop="showPrioritySelect = !showPrioritySelect" style="position: relative;margin-right: 10px;">
          <el-tag :type="getPriorityType(selectedBug.bugLevel)"
            :style="{ backgroundColor: getBugLevelColor2(selectedBug.bugLevel), color: getBugLevelTextColor2(selectedBug.bugLevel) }">
            {{ getBugLevelName(selectedBug.bugLevel) }}
            <el-icon class="ml-1">
              <ArrowDown />
            </el-icon>
          </el-tag>
          <div v-if="showPrioritySelect"
            class="absolute left-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-24 z-10"
            @mouseleave="mouseleaveAssignessSelect">
            <div v-for="priority in PRIORITY_COLORS" :key="priority.value"
              class="px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm"
              @click="changePriority(selectedBug, priority.value)">
              {{ priority.label }}
            </div>
          </div>
        </span>
        <!-- 状态选择 -->
        <span @click.stop="showStatusSelect = !showStatusSelect" style="position: relative;">
          <el-tag :type="getBugStatusType(selectedBug.bugStatus)"
            :style="{ backgroundColor: getBugLevelColor2(selectedBug.bugStatus), color: getBugLevelTextColor2(selectedBug.bugStatus) }">
            {{ getBugStatusName(selectedBug.bugStatus) }}
            <el-icon class="ml-1">
              <ArrowDown />
            </el-icon>
          </el-tag>
          <div v-if="showStatusSelect"
            class="absolute left-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 py-1 w-40 z-10"
            @mouseleave="mouseleaveAssignessSelect">
            <div v-for="status in bugStatusList" :key="status.bug_status"
              class="px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm"
              @click="changeStatus(selectedBug, status.bug_status)">
              {{ status.bug_status_name }}
            </div>
          </div>
        </span>
        <p>
          <b>创建人：</b>{{ selectedBug.createUserName }}&nbsp;&nbsp;&nbsp;&nbsp;
          <b>创建时间：</b> {{ selectedBug.createTime }}&nbsp;&nbsp;&nbsp;&nbsp;
          <b>BugId： </b>{{ selectedBug.id }}
        </p>
        <!-- 修复人 -->
        <div class="relative" @click="showAssigneeSelect = true">
          <div class="flex items-center space-x-3">
            <span class="text-sm text-gray-500"><b>修复人：</b></span>
            <div class="flex -space-x-2">
              <div v-for="assignee in selectedBug.assignees" :key="assignee"
                class="w-6 h-6 rounded-full bg-blue-500 flex items-center justify-center text-white border-2 border-white">
                {{ assignee.charAt(0) }}
              </div>
            </div>
            <div class="font-medium flex items-center cursor-pointer group">
              <span v-if="selectedBug.assignees.length > 0"><b style="color: #000;">切换修复人：</b>{{
                selectedBug.assignees.join(', ') }}</span>
              <span v-else class="text-gray-400">选择修复人</span>
              <el-icon class="ml-1 opacity-0 group-hover:opacity-100">
                <ArrowDown />
              </el-icon>
            </div>
          </div>

          <div v-if="showAssigneeSelect"
            class="absolute left-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 p-2 w-64 z-10"
            style="left: 100px;" @mouseleave="mouseleaveAssignessSelect">
            <div class="relative mb-2">
              <input type="text" v-model="assigneeSearchKeyword" placeholder="搜索处理人..."
                class="w-full pl-8 pr-4 py-1.5 rounded-lg bg-gray-50 border-none text-sm" />
              <el-icon class="absolute left-2.5 top-2 text-gray-400">
                <Search />
              </el-icon>
            </div>
            <div class="max-h-48 overflow-y-auto mb-2">
              <div v-for="user in filteredAssigneeList" :key="user.nickName"
                class="px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm flex items-center justify-between rounded"
                @click="toggleAssignee(user)">
                {{ user.nickName }}
                <el-icon v-if="selectedBug.assignees.includes(user.nickName)" class="text-blue-500">
                  <Check />
                </el-icon>
              </div>
              <div v-if="filteredAssigneeList.length === 0" class="px-3 py-2 text-sm text-gray-500 text-center">
                无匹配结果
              </div>
            </div>
            <div class="flex justify-end px-2">
              <el-button type="primary" size="small" class="!rounded-button" @click="updateBugEdit">确定</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="bug-content">
        <!-- 问题描述 -->
        <div class="bug-describe">
          <h3>问题现象</h3>
          <div v-html="selectedBug.bugPhenomenon" @click="showImg($event)"></div>
        </div>
        <div class="bug-describe">
          <h3>复现步骤</h3>
          <div v-html="selectedBug.repeatSteps" @click="showImg($event)"></div>
        </div>
        <div class="bug-describe">
          <h3>影响范围</h3>
          <div v-html="selectedBug.scope" @click="showImg($event)"></div>
        </div>
        <div class="bug-describe">
          <h3>期望结果</h3>
          <div v-html="selectedBug.hopeResult" @click="showImg($event)"></div>
        </div>
        <!-- Tab切换区域 -->
        <div class="border-t border-gray-100">
          <!-- 评论区域 -->
          <div v-if="activeTab === 'comments'" class="space-y-4 max-h-[400px] overflow-y-auto pr-2">
            <!-- 评论输入框 -->
            <div class="flex space-x-3">
              <div
                class="w-8 h-8 rounded-full bg-blue-500 flex-shrink-0 flex items-center justify-center text-white text-sm">
                我
              </div>
              <div class="flex-1">
                <el-form-item label="评论">
                  <RichTextEditor4 v-model="newComment.newCommentMsg" field-name="phenomenon2" />
                </el-form-item>
                <div class="flex justify-end">
                  <el-button type="primary" size="small" @click="addComment" class="!rounded-button">
                    发送评论
                  </el-button>
                </div>
              </div>
            </div>
            <!-- 评论列表 -->
            <div class="space-y-4 overflow-y-auto pr-2">
              <div v-for="(comment, index) in comments" :key="index" class="flex space-x-3">
                <div
                  class="w-8 h-8 rounded-full bg-gray-500 flex-shrink-0 flex items-center justify-center text-white text-sm">
                  {{ comment.createUserName.charAt(0) }}
                </div>
                <div class="flex-1">
                  <div class="flex items-center space-x-2">
                    <span class="font-medium">{{ comment.createUserName }}</span>
                    <span class="text-sm text-gray-500">{{ comment.createAt }}</span>
                  </div>
                  <div class="space-y-4">
                    <div class="prose max-w-none text-gray-700" v-html="comment.bugMsg" @click="showImg($event)">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>

  <!-- 查看大图 -->
  <div class="page-shade" v-if="isShowBigImg">
    <div class="img-big" @click="isShowBigImg = false" @mousewheel="mousewheel">
      <img :src="curPhoto.url" alt="大图" @click="isShowBigImg = false" :style="{
        transform: `rotate(${curPhoto.rotate}deg) scale(${curPhoto.scale})`,
        width: `${curPhoto.w}px`
      }" />
    </div>
  </div>

  <!-- 图片预览对话框 -->
  <el-dialog v-model="showImagePreview" title="图片预览" width="auto">
    <el-image :src="previewImageUrl" :preview-src-list="[previewImageUrl]" :zoom-rate="1.2" :max-scale="10"
      :min-scale="0.1" fit="none" style="max-width: 100%; display: block;" />
  </el-dialog>

  <!-- 新建Bug弹窗 -->
  <el-dialog v-model="showAddBugDialog" title="新建 Bug" width="1250px" style="margin-top: 5vh;"
    @close="handleColseAddDialog" @closed="handleColseAddDialog">
    <div class="space-y-4" style="height: 80vh; overflow-y: auto">
      <el-form :model="newBug" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="newBug.bugTitle" placeholder="请输入Bug标题" />
        </el-form-item>
        <el-form-item label="严重等级">
          <div class="flex gap-2">
            <el-button size="default" :type="newBug.bugLevel === 1 ? 'danger' : 'default'" @click="newBug.bugLevel = 1"
              class="!rounded-button whitespace-nowrap">致命</el-button>
            <el-button size="default" :type="newBug.bugLevel === 2 ? 'warning' : 'default'" @click="newBug.bugLevel = 2"
              class="!rounded-button whitespace-nowrap">严重</el-button>
            <el-button size="default" :type="newBug.bugLevel === 3 ? 'info' : 'default'" @click="newBug.bugLevel = 3"
              class="!rounded-button whitespace-nowrap">一般</el-button>
            <el-button size="default" :type="newBug.bugLevel === 4 ? 'info' : 'default'" @click="newBug.bugLevel = 4"
              class="!rounded-button whitespace-nowrap">建议</el-button>
          </div>
        </el-form-item>
        <el-form-item label="修复人">
          <div class="relative" @click="showAssigneeSelect = true">
            <div class="flex items-center space-x-3">
              <div class="flex -space-x-2">
                <div v-for="(nickName, index) in selectedNickNames" :key="index"
                  class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white border-2 border-white">
                  {{ nickName.charAt(0) }}
                </div>
              </div>
              <div class="font-medium flex items-center cursor-pointer group">
                <span v-if="selectedNickNames.length > 0">
                  {{ selectedNickNames.join(', ') }}
                </span>
                <span v-else class="text-gray-400">选择处理人</span>
                <el-icon class="ml-1 opacity-0 group-hover:opacity-100">
                  <ArrowDown />
                </el-icon>
              </div>
            </div>

            <div v-if="showAssigneeSelect"
              class="absolute left-0 top-full mt-1 bg-white rounded-lg shadow-lg border border-gray-200 p-2 w-64 z-10">
              <div class="relative mb-2">
                <input type="text" v-model="assigneeSearchKeyword" placeholder="搜索处理人..."
                  class="w-full pl-8 pr-4 py-1.5 rounded-lg bg-gray-50 border-none text-sm" />
                <el-icon class="absolute left-2.5 top-2 text-gray-400">
                  <Search />
                </el-icon>
              </div>

              <div class="max-h-48 overflow-y-auto mb-2">
                <div v-for="user in filteredAssigneeList" :key="user.uuid"
                  class="px-3 py-2 hover:bg-gray-50 cursor-pointer text-sm flex items-center justify-between rounded"
                  @click="toggleSelectUser(user)">
                  {{ user.nickName }}
                  <el-icon v-if="selectedUserUuids.includes(user.uuid)" class="text-blue-500">
                    <Check />
                  </el-icon>
                </div>
                <div v-if="filteredAssigneeList.length === 0" class="px-3 py-2 text-sm text-gray-500 text-center">
                  无匹配结果
                </div>
              </div>

              <div class="flex justify-end px-2">
                <el-button type="primary" size="small" class="!rounded-button" @click="showAssigneeSelect = false">
                  确定
                </el-button>
              </div>
            </div>
          </div>
        </el-form-item>

        <!-- bug详情录入 -->
        <div class="space-y-4">
          <el-form-item label="问题现象">
            <RichTextEditor2 v-model="newBug.bugPhenomenon" field-name="phenomenon1" />
          </el-form-item>

          <el-form-item label="复现步骤">
            <RichTextEditor3 v-model="newBug.repeatSteps" field-name="phenomenon2" />
          </el-form-item>

          <el-form-item label="影响范围">
            <el-input v-model="newBug.scope" type="textarea" :rows="3" placeholder="如：影响系统使用" />
          </el-form-item>

          <el-form-item label="期望结果">
            <el-input v-model="newBug.hopeResult" type="textarea" :rows="3" placeholder="如：可以正常打开页面" />
          </el-form-item>
        </div>
      </el-form>
      <div class="flex justify-end gap-2">
        <!-- <el-button @click="showAddBugDialog = false" class="!rounded-button">取消</el-button> -->
        <el-button @click="handleColseAddDialog" class="!rounded-button">取消</el-button>
        <el-button type="primary" @click="submitForm" class="!rounded-button">确定</el-button>
      </div>
    </div>
  </el-dialog>


</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import {
  GetBugRequirementList, //获取存在bug的需求和所有需求
  GetRequirementAllBug,///根据需求id和过滤条件获取所有bug
  GetBugStatusList,//获取bug状态列表
  UpdateBugLevelById,// 根据bugid更新bug等级
  UpdateBugStatusById,// 根据bugid更新bug状态
  GetRoleUser,//获取所有用户
  UpdateBugEditById,// 根据bugid更新bug
  FindBugMsgById,// 根据需求id获取bug详情
  PostAddNewRequirementBug,//新建bug
  GetBugMsgById,//获取bug评论
  PostAddBugTipsById,//添加bug评论
} from "@/api/newDemands/index";
import { ElMessage } from 'element-plus';
import RichTextEditor2 from './editor2.vue'
import RichTextEditor3 from './editor3.vue'
import RichTextEditor4 from './editor4.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const newBug = ref<BugForm>({
  itemRequirementId: 0,
  bugTitle: "",
  bugStatus: 0,
  bugLevel: 0,
  editUserIds: [],  // 现在会被识别为 string[]
  bugPhenomenon: "",
  repeatSteps: "",
  scope: "",
  hopeResult: "",
});

interface BugForm {
  itemRequirementId: number;
  bugTitle: string;
  bugLevel: number;
  editUserIds: string[];  // 明确指定为 string[]
  bugStatus: number;
  bugPhenomenon: string;
  repeatSteps: string;
  scope: string;
  hopeResult: string;
}
// 定义 BugItem 接口
interface BugItem {
  id: number;
  itemRequirementId: number;
  bugTitle: string;
  bugStatus: number;
  bugStatusOrder: number;
  bugStatusColor: string;
  bugStatusName: string;
  createUserName: string;
  editUserName: string[];
  endEditUserName: string;
  bugLevel: number;
  createTime: string;
  bug_msgs: {}[];
  assignees: string[], // 确保初始化为空数组
  bugPhenomenon: string;
  repeatSteps: string;
  scope: string;
  hopeResult: string;
}

interface User {
  nickName: string;
  id: number;
  uuid: string;
  headerImg?: string; // 可选字段
  authorityId?: number; // 可选字段
  userWxId?: number; // 可选字段
  assignees: string[], // 确保初始化为空数组
}

// 定义 RequirementItem 接口
interface RequirementItem {
  id: number;
  requirementName: string;
  requirementFatherStatus: number;
  bugCount: number;
}


// 定义评论返回接口
interface BugTips {
  bugMsg: string,
  createUserName: string,
  createAt: string,

}

// 添加bug评论的报文
interface ReqBugTip {
  newCommentId: number;
  newCommentMsg: string;
  bugStatus: number;
  bugLevel: number;
}


// 详情切换区域
const activeTab = ref('comments');
const newComment = ref<ReqBugTip>({
  newCommentId: 0,
  newCommentMsg: "",
  bugStatus: 0,
  bugLevel: 0,
});
const comments = ref<BugTips[]>([])

// 添加评论
const addComment = async () => {
  console.log(newComment.value)

  const { data } = await PostAddBugTipsById(newComment.value)

  if (data.code == 200) {
    GetBugMsgByIdMsg(newComment.value.newCommentId);
    ElMessage.success(data.msg);
  } else {
    ElMessage.error(data.msg);
  }
  newComment.value.newCommentMsg = "";
};

// 新增bug
// 存储选中的用户UUID（用于提交）
const selectedUserUuids = ref<string[]>([])

// 存储选中的用户昵称（用于显示）
const selectedNickNames = ref<string[]>([])

const showAddBugDialog = ref(false);
// 打开新增bug弹框，初始化必要数据
const allRoleUserList = ref<any>([]);
// 选中的修复人
const OpenAddBugDialog = async () => {
  showAddBugDialog.value = true
  // 获取可选择修复人列表
  const { data } = await GetRoleUser()
  if (data.code == 200) {
    allRoleUserList.value = data.data
    ElMessage.success(data.msg);
  } else {
    ElMessage.error(data.msg);
  }
}

// 把选中的人添加到数组中，取消的人从数组中去掉
const toggleSelectUser = (user: User) => {
  const uuidIndex = selectedUserUuids.value.indexOf(user.uuid)

  if (uuidIndex > -1) {
    // 取消选中
    selectedUserUuids.value.splice(uuidIndex, 1)
    selectedNickNames.value = selectedNickNames.value.filter(
      name => name !== user.nickName
    )
  } else {
    // 选中
    selectedUserUuids.value.push(user.uuid)
    selectedNickNames.value.push(user.nickName)
  }
}


// 是否显示大图
const isShowBigImg = ref(false);
// 当前大图的信息
const curPhoto = ref({
  url: "", //照片地址
  name: "", //照片名称
  rotate: 0, //旋转角度
  scale: 1, //缩放比例
  w: 0, //照片宽度
  h: 0, // 照片高度
});
// 显示大图
const showImg = (event: MouseEvent) => {
  const target = event.target as HTMLElement;
  if (target.tagName === 'IMG') {
    const targetImage = target as HTMLImageElement;
    curPhoto.value.url = targetImage.src;
    curPhoto.value.rotate = 0;
    curPhoto.value.scale = 1;
    // 确保图片加载完成
    const img = new Image();
    img.onload = () => {
      curPhoto.value.w = img.width; // 使用图片的原始宽度
      curPhoto.value.h = img.height; // 使用图片的原始高度
      isShowBigImg.value = true;
    };
    img.src = targetImage.src;
  }
};


// 鼠标滚动事件
const mousewheel = (e: WheelEvent) => {
  e.preventDefault(); // 阻止默认行为
  const isZoomingIn = e.deltaY < 0; // deltaY < 0 表示向上滚动（放大）
  const zoomStep = 0.1; // 每次滚动的缩放步长
  if (isZoomingIn) {
    // 放大
    if (curPhoto.value.scale < 2) { // 最大缩放比例限制
      curPhoto.value.scale += zoomStep;
    }
  } else {
    // 缩小
    if (curPhoto.value.scale > 0.3) { // 最小缩放比例限制
      curPhoto.value.scale -= zoomStep;
    }
  }
  // 确保缩放比例在合理范围内
  curPhoto.value.scale = Math.max(0.3, Math.min(2, curPhoto.value.scale));
};

// 查看详情大图
const showImagePreview = ref(false);
const previewImageUrl = ref('');
// 处理图片点击事件
const handleImageClick = (e: MouseEvent) => {
  const target = e.target as HTMLElement;
  if (target.tagName === 'IMG') {
    previewImageUrl.value = target.getAttribute('src') || '';
    showImagePreview.value = true;
  }
};

// 取消添加bug
const handleColseAddDialog = () => {
  selectedUserUuids.value = [];
  selectedNickNames.value = [];
  newBug.value.bugLevel = 0,
    newBug.value.bugPhenomenon = "",
    newBug.value.bugStatus = 0,
    newBug.value.bugTitle = "",
    newBug.value.editUserIds = [],
    newBug.value.hopeResult = "",
    newBug.value.repeatSteps = "",
    newBug.value.scope = "",

    showAddBugDialog.value = false;
};



// 添加bug
const submitForm = async () => {
  newBug.value.editUserIds = selectedUserUuids.value;

  // 增加创建验证
  if (!newBug.value.bugTitle) {
    ElMessage.warning("请输入bug标题")
    return
  }
  if (newBug.value.bugLevel === 0) {
    ElMessage.warning("请选择bug等级")
    return
  }
  if (newBug.value.editUserIds.length === 0) {
    ElMessage.warning("请选择bug修复人")
    return
  }
  if (!newBug.value.bugPhenomenon) {
    ElMessage.warning("问题现象不能为空")
    return
  }
  if (!newBug.value.repeatSteps) {
    ElMessage.warning("请输入复现步骤")
    return
  }

  if (!newBug.value.scope) {
    ElMessage.warning("请输入影响范围")
    return
  }

  if (!newBug.value.hopeResult) {
    ElMessage.warning("请输入期望结果")
    return
  }


  const { data } = await PostAddNewRequirementBug(newBug.value);
  if (data.code == 200) {
    newBug.value.bugLevel = 0,
      newBug.value.bugPhenomenon = "",
      newBug.value.bugStatus = 0,
      newBug.value.bugTitle = "",
      newBug.value.editUserIds = [],
      newBug.value.hopeResult = "",
      newBug.value.repeatSteps = "",
      newBug.value.scope = "",
      showAddBugDialog.value = false
    ElMessage.success(data.msg);
    await fetchBugs();
  } else {
    ElMessage.error(data.msg);
  }
};

// bug详情变量
const showDetailDialog = ref(false);
const filteredAssignees = ref<User[]>([]);
const selectedBug = ref<BugItem | null>(null);
const showPrioritySelect = ref(false);
const showStatusSelect = ref(false);
const showAssigneeSelect = ref(false);
const assigneeSearchKeyword = ref('');
const assigneeList = ref<User[]>([]); // 存储所有可选择的人员


const filteredAssigneeList = computed(() => {
  const keyword = assigneeSearchKeyword.value.trim().toLowerCase();
  if (!keyword) return assigneeList.value;
  return assigneeList.value.filter((user) => user.nickName.toLowerCase().includes(keyword));
});
// 查看 bug 详情
const fetchBugDetail = async (itemRequirementId: number) => {
  newComment.value.newCommentId = itemRequirementId;
  FindBugMsgByIdMsg(itemRequirementId);
  GetBugMsgByIdMsg(itemRequirementId);
};

// 查看bug详情
const FindBugMsgByIdMsg = async (itemRequirementId: number) => {
  try {
    const { data } = await FindBugMsgById(itemRequirementId);
    if (data.code === 200) {
      const bugData = data.data;
      // 更新 selectedBug
      selectedBug.value = {
        id: bugData.ID,
        itemRequirementId: bugData.item_requirement_id,
        bugTitle: bugData.bug_title,
        bugStatus: bugData.bug_status,
        bugStatusOrder: bugData.bug_tips ? 1 : 0,
        bugStatusColor: '',
        bugStatusName: getBugStatusName(bugData.bug_status),
        createUserName: bugData.create_user_name,
        editUserName: bugData.edit_user_names.split('|'),
        endEditUserName: bugData.end_edit_user_name,
        bug_msgs: bugData.bug_msgs,
        bugLevel: bugData.bug_level,
        createTime: bugData.createAt,
        assignees: bugData.edit_user_names.split('|'),
        hopeResult: bugData.hopeResult,
        bugPhenomenon: bugData.bugPhenomenon,
        repeatSteps: bugData.repeatSteps,
        scope: bugData.scope,
      };
      newComment.value.bugLevel = bugData.bug_level;
      newComment.value.bugStatus = bugData.bug_status;
    } else {
      console.error("获取 Bug 详情失败:", data.msg);
      selectedBug.value = null;
    }

  } catch (error) {
    console.error("获取 Bug 详情时发生错误:", error);
    selectedBug.value = null;
  }
};

// 查看bug评论
const GetBugMsgByIdMsg = async (itemRequirementId: number) => {
  try {
    const { data } = await GetBugMsgById(itemRequirementId);
    if (data.code === 200) {

      comments.value = data.data.map((item: any) => ({
        bugMsg: item.bug_msg,
        createUserName: item.create_user_name,
        createAt: item.createAt,
      }));
      ElMessage.success(data.msg);
    } else {
      ElMessage.error(data.msg);
      selectedBug.value = null;
    }

  } catch (error) {
    selectedBug.value = null;
  }
};


const toggleAssignee = (user: User) => {
  if (!selectedBug.value) {
    console.error('selectedBug.value is null');
    return; // 如果 selectedBug.value 为 null，直接返回
  }

  if (selectedBug.value.assignees.includes(user.nickName)) {
    // 如果已选中，则移除
    selectedBug.value.assignees = selectedBug.value.assignees.filter((id) => id !== user.nickName);
  } else {
    // 如果未选中，则添加
    selectedBug.value.assignees.push(user.nickName);
  }
};

// 修改 onSelectRequirement 方法
const onSelectRequirement = async (index: number) => {
  selectedReq.value = index;
  await fetchBugs();

  // 点击需求卡片时调用接口获取 Bug 列表接口
  const selectedRequirement = requirements.value[selectedReq.value];
  selectedRequirementName.value = selectedRequirement.requirementName
  if (selectedRequirement) {
    await fetchBugStatusList();
  }
};


// 更新修复人
const updateBugEdit = async () => {
  if (!selectedBug.value) {
    console.error('selectedBug.value is null');
    return;
  }

  try {
    const bugEdits = assigneeList.value
      .filter((user) => selectedBug.value?.assignees.includes(user.nickName))
      .map((user) => user.uuid);

    const response = await UpdateBugEditById({
      id: selectedBug.value.id,
      bugEdits: bugEdits,
    });

    if (response.data.code === 200) {
      console.log('修复人更新成功');
      showAssigneeSelect.value = false;

      // 更新本地数据
      const updatedBugIndex = bugs.value.findIndex(bug => bug.id === selectedBug.value?.id);
      if (updatedBugIndex !== -1) {
        // 创建新的数组以避免 Vue 的响应性问题
        const updatedBugs = [...bugs.value];
        updatedBugs[updatedBugIndex] = {
          ...updatedBugs[updatedBugIndex],
          editUserName: selectedBug.value.assignees
        };
        bugs.value = updatedBugs;
      }

      // 如果当前查看的 bug 详情就是刚更新的 bug，也更新详情视图
      if (selectedBug.value) {
        selectedBug.value.editUserName = selectedBug.value.assignees;
      }
    } else {
      console.error('修复人更新失败:', response.data.msg);
    }
  } catch (error) {
    console.error('修复人更新时发生错误:', error);
  }
};

// 取消/鼠标移开下拉列表
const mouseleaveAssignessSelect = () => {
  assigneeSearchKeyword.value = "";
  showAssigneeSelect.value = false;
  showStatusSelect.value = false;
  showPrioritySelect.value = false;
}


const requirements = ref<RequirementItem[]>([]);
const requirementsCopy = ref<RequirementItem[]>([]);
const bugs = ref<BugItem[]>([]);
const selectedReq = ref(0); // 选择的需求索引
const requirementFilter = ref(1); // 需求过滤条件
const bugLevel = ref<number>(0); // 当前选中的优先级，默认值为 0（全部）
const bugKeyWord = ref('');
const bugId = ref<any>(null);
const statusFilter = ref<number>(0); // 当前选中的状态值，默认为 null（全部）
const bugStatusList = ref<any[]>([]); // 从接口获取的 Bug 状态列表
const inPersiionFilter = ref<number>(0); // 当前选中的负责人筛选值，默认为 0（所有人）
const selectedRequirementName = ref('');


const filteredRequirements = (type: any) => {
  if (type === 1) {
    requirementFilter.value = 1
    reqPageInfoRequirement.value.allBug = 1;
    fetchRequirements();
  } else {
    requirementFilter.value = 2
    reqPageInfoRequirement.value.allBug = 2;
    fetchRequirements();
  }
}

const PRIORITY_COLORS = [
  { value: 0, label: "全部", bgColor: "#409eff", textColor: "#fff" },
  { value: 1, label: "致命", bgColor: "#ff4d4f", textColor: "#fff" },
  { value: 2, label: "严重", bgColor: "#ffc107", textColor: "#fff" },
  { value: 3, label: "一般", bgColor: "#52c41a", textColor: "#fff" },
  { value: 4, label: "建议", bgColor: "#909399", textColor: "#fff" },
];

const PRIORITY_COLORS2 = [
  { value: 1, label: "致命", bgColor: "#ff4d4f", textColor: "#fff" },
  { value: 2, label: "严重", bgColor: "#ffc107", textColor: "#fff" },
  { value: 3, label: "一般", bgColor: "#52c41a", textColor: "#fff" },
  { value: 4, label: "建议", bgColor: "#909399", textColor: "#fff" },
];



// 获取优先级的类型（用于 el-tag 的 type 属性）
const getPriorityType = (level: number): string => {
  if (level === 1) return 'danger';
  if (level === 2) return 'warning';
  if (level === 3 || level === 4) return 'info';
  return 'default';
};

// 获取 Bug 状态的类型（用于 el-tag 的 type 属性）
const getBugStatusType = (status: number): string => {
  if (status === 1) return 'info'; // 待处理
  if (status === 2) return 'warning'; // 处理中
  if (status === 3) return 'success'; // 已解决
  return 'default';
};


// 获取所有用户
const fetchAssignees = async () => {
  try {
    const { data } = await GetRoleUser();
    if (data.code === 200) {
      assigneeList.value = data.data; // 存储用户列表
      filteredAssignees.value = data.data;// 初始化 filteredAssignees
    } else {
      console.error("获取用户列表失败:", data.msg);
    }
  } catch (error) {
    console.error("获取用户列表时发生错误:", error);
  }
};

// 修改状态
const changeStatus = async (bug: any, newStatus: number) => {
  try {
    const response = await UpdateBugStatusById({
      id: bug.id,
      bug_status: newStatus,
    });

    if (response.data.code === 200) {
      // 更新本地 bugs 数组中的数据
      const updatedBugIndex = bugs.value.findIndex(b => b.id === bug.id);
      if (updatedBugIndex !== -1) {
        // 创建新数组确保响应性
        const updatedBugs = [...bugs.value];
        updatedBugs[updatedBugIndex] = {
          ...updatedBugs[updatedBugIndex],
          bugStatus: newStatus,
          bugStatusName: getBugStatusName(newStatus), // 更新状态名称
          bugStatusColor: getBugStatusColor(newStatus) // 更新状态颜色
        };
        bugs.value = updatedBugs;
      }

      // 如果当前查看的是详情，也更新详情数据
      if (selectedBug.value && selectedBug.value.id === bug.id) {
        selectedBug.value.bugStatus = newStatus;
        selectedBug.value.bugStatusName = getBugStatusName(newStatus);
        selectedBug.value.bugStatusColor = getBugStatusColor(newStatus);
      }

      console.log('状态更新成功');
    } else {
      console.error('状态更新失败:', response.data.msg);
    }
  } catch (error) {
    console.error('状态更新时发生错误:', error);
  } finally {
    showStatusSelect.value = false;
  }
};


// 修改优先级
const changePriority = async (bug: any, newLevel: number) => {
  try {
    const response = await UpdateBugLevelById({
      id: bug.id,
      bug_level: newLevel,
    });

    if (response.data.code === 200) {
      // 更新本地数据
      const updatedBugIndex = bugs.value.findIndex(b => b.id === bug.id);
      if (updatedBugIndex !== -1) {
        // 使用 Vue.set 或创建新数组确保响应性
        const updatedBugs = [...bugs.value];
        updatedBugs[updatedBugIndex] = {
          ...updatedBugs[updatedBugIndex],
          bugLevel: newLevel
        };
        bugs.value = updatedBugs;
      }

      // 如果当前查看的是详情，也更新详情数据
      if (selectedBug.value && selectedBug.value.id === bug.id) {
        selectedBug.value.bugLevel = newLevel;
      }

      console.log('优先级更新成功');
    } else {
      console.error('优先级更新失败:', response.data.msg);
    }
  } catch (error) {
    console.error('优先级更新时发生错误:', error);
  } finally {
    showPrioritySelect.value = false;
  }
};

const handlePageChange = (page: number) => {
  reqPageInfoRequirement.value.page = page;
  fetchRequirements();
};


const handleBugListPageChange = (page: number) => {
  bugFilter.value.page = page;
  fetchBugs();
};

// 需求列表请求报文
interface reqPageInfoRequirementForm {
  page: number,
  pageSize: number,
  keyword: string,
  allBug: number,
  id: string,
}
const total = ref(0)
const bugTotal = ref(0);
// 需求查询条件
const reqPageInfoRequirement = ref<reqPageInfoRequirementForm>({
  page: 1,
  pageSize: 5,
  keyword: "",
  id: "",
  allBug: 1,
})


const handleSearch = async () => {
  fetchRequirements();
}
const handleBugSearch = async () => {
  fetchBugs();
}

// 获取需求列表
const fetchRequirements = async () => {
  try {
    const { data } = await GetBugRequirementList(reqPageInfoRequirement.value);
    if (data.code === 200) {
      requirements.value = data.data.list.map((item: any) => ({
        id: item.id,
        requirementName: item.requirementName,
        bugCount: item.bugCount,
      }));


      if (data.data.list.length == 1) {
        selectedRequirementName.value = data.data.list[0].requirementName;
      }
      requirementsCopy.value = requirements.value
      total.value = data.data.total;
      if (requirements.value.length > 0) {
        await fetchBugs();
      }
    } else {
      console.error("获取需求列表失败:", data.msg);
    }
  } catch (error) {
    console.error("获取需求列表时发生错误:", error);
  }
};

const showBugDetail = async (bug: any) => {
  // 判断是否为移动端
  const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
  if (isMobile) {
    // 移动端 - 跳转到独立页面
    router.push(`/bug/${bug.id}`);
  } else {
    console.log("当前bug详情：", bug);
    selectedBug.value = {
      ...bug,
      assignees: bug.assignees ?? [], // 如果 assignees 不存在，则默认为空数组
    };
    showDetailDialog.value = true;
    await fetchBugDetail(bug.id);
  }
};


// 获取 Bug 状态列表
const fetchBugStatusList = async () => {
  try {
    const { data } = await GetBugStatusList();
    if (data.code === 200) {
      bugStatusList.value = data.data; // 存储接口返回的状态列表
    } else {
      console.error("获取 Bug 状态列表失败:", data.msg);
    }
  } catch (error) {
    console.error("获取 Bug 状态列表时发生错误:", error);
  }
};

const getBugLevelName = (level: number): string => {
  const levelObj = PRIORITY_COLORS.find((p) => p.value === level);
  return levelObj ? levelObj.label : '未知等级';
};
const getBugLevelName2 = (level: number): string => {
  const levelObj = PRIORITY_COLORS2.find((p) => p.value === level);
  return levelObj ? levelObj.label : '未知等级';
};

const getBugLevelColor2 = (level: number): string => {
  const levelObj = PRIORITY_COLORS2.find((p) => p.value === level);
  return levelObj ? levelObj.bgColor : '#999'; // 默认灰色
};

const getBugLevelTextColor2 = (level: number): string => {
  const levelObj = PRIORITY_COLORS2.find((p) => p.value === level);
  return levelObj ? levelObj.textColor : '#000'; // 默认黑色
};

// 根据状态值获取状态名称
const getBugStatusName = (status: number) => {
  const statusObj = bugStatusList.value.find((s) => s.bug_status === status);
  return statusObj ? statusObj.bug_status_name : '未知状态';
};

// 根据状态值获取状态颜色
const getBugStatusColor = (status: number) => {
  const statusObj = bugStatusList.value.find((s) => s.bug_status === status);
  return statusObj ? statusObj.bugStatusColor : '#999'; // 默认灰色
};
// 构造过滤条件对象
const bugFilter = ref({
  requirementID: 0,
  bugStatus: 0, // 传递 number 类型的 bugStatus
  bugLevel: 0, // 传递 string 类型的 bugLevel
  inPersiion: 0, // 传递 number 类型的 inPersiion
  page: 1,
  pageSize: 9,
  keyword: "",
  bugKeyWord: "",
  bugId: "",
});

// 根据需求和过滤条件获取 Bug 列表
const fetchBugs = async () => {
  const requirementID = requirements.value[selectedReq.value].id;
  newBug.value.itemRequirementId = requirements.value[selectedReq.value].id;
  bugFilter.value.requirementID = requirementID;
  bugFilter.value.bugStatus = statusFilter.value;// 传递 number 类型的 bugStatus,
  bugFilter.value.bugLevel = bugLevel.value; // 传递 string 类型的 bugLevel
  bugFilter.value.inPersiion = inPersiionFilter.value; // 传递 number 类型的 inPersiion
  bugFilter.value.bugKeyWord = bugKeyWord.value;
  const { data } = await GetRequirementAllBug(bugFilter.value);
  if (data.code === 200) {
    bugs.value = data.data.list.map((item: any) => ({
      id: item.id,
      itemRequirementId: item.itemRequirementId,
      bugTitle: item.bugTitle,
      bugStatus: item.bugStatus,
      bugStatusOrder: item.bugStatusOrder,
      bugStatusColor: item.bugStatusColor,
      createUserName: item.createUserName,
      bugLevel: item.bugLevel,
      createTime: item.createTime,
      bugStatusName: item.bugStatusName,
      endEditUserName: item.endEditUserName,
      editUserName: item.editUserName, // 提供默认值
    }));
    bugTotal.value = data.data.total;
  } else {
    console.error("获取 Bug 列表失败:", data.msg);
  }
};

// 根据需求和过滤条件获取 Bug 列表
const fetchBugs2 = async () => {
  bugFilter.value.bugStatus = statusFilter.value;// 传递 number 类型的 bugStatus,
  bugFilter.value.bugLevel = bugLevel.value; // 传递 string 类型的 bugLevel
  bugFilter.value.inPersiion = inPersiionFilter.value; // 传递 number 类型的 inPersiion
  bugFilter.value.bugKeyWord = bugKeyWord.value;
  bugFilter.value.bugId = bugId.value;
  bugFilter.value.requirementID = 0;
  const { data } = await GetRequirementAllBug(bugFilter.value);
  if (data.code === 200) {
    bugs.value = data.data.list.map((item: any) => ({
      id: item.id,
      itemRequirementId: item.itemRequirementId,
      bugTitle: item.bugTitle,
      bugStatus: item.bugStatus,
      bugStatusOrder: item.bugStatusOrder,
      bugStatusColor: item.bugStatusColor,
      createUserName: item.createUserName,
      bugLevel: item.bugLevel,
      createTime: item.createTime,
      bugStatusName: item.bugStatusName,
      endEditUserName: item.endEditUserName,
      editUserName: item.editUserName, // 提供默认值
    }));
    bugTotal.value = data.data.total;
    if (data.data.list.length == 1 && data?.data?.list?.[0]?.itemRequirementId && reqPageInfoRequirement?.value) {
      reqPageInfoRequirement.value.id = String(data.data.list[0].itemRequirementId);
      fetchRequirements();
      reqPageInfoRequirement.value.id = "";
    } else if (bugFilter.value.bugId == '') {
      reqPageInfoRequirement.value.id = "";
      fetchRequirements();
    } else {
      ElMessage.error("没有符合的数据")
    }

  } else {
    console.error("获取 Bug 列表失败:", data.msg);
  }
};

// 过滤条件改变时更新 Bug 列表
const onFilterChange = async () => {
  await fetchBugs();
};


onMounted(async () => {
  const isBugID = localStorage.getItem("BugID");
  if (isBugID) {
    bugId.value = localStorage.getItem("BugID");
    console.log(bugId.value);
    fetchBugs2();
    fetchBugStatusList();
    fetchAssignees();
    localStorage.removeItem("BugID");
  } else {
    fetchRequirements();
    fetchBugStatusList();
    fetchAssignees();
    document.addEventListener('click', (e) => {
      const target = e.target as HTMLElement;
      if (!target.closest('.relative')) {
        showAssigneeSelect.value = false;
        showPrioritySelect.value = false;
        showStatusSelect.value = false;
      }
    });
  }
});

</script>
<style scoped>
.mian-content {
  display: flex;
  height: calc(100vh - 100px);
}

.main-left {
  width: 400px;
  height: 100%;
  box-shadow: var(--el-box-shadow-light);
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  margin-right: 20px;
}

.main-left-content {
  height: calc(100% - 100px);
  overflow: auto;
}

.main-left-content-li {
  padding: 5px;
  margin: 10px;
  margin-bottom: 15px;
}

.main-right {
  width: calc(100% - 420px);
  height: 100%;
  box-shadow: var(--el-box-shadow-light);
  background: #fff;
  padding: 10px;
  border-radius: 8px;
}

.preview-dialog :deep(.el-dialog) {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: fixed;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  max-height: 90vh;
  max-width: 90vw;
}

.preview-dialog :deep(.el-dialog__body) {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.assignee-select-dropdown {
  position: fixed;
  bottom: 0;
  left: 50%;
  /* 居中 */
  transform: translateX(-50%);
  /* 居中 */
  max-width: 300px;
  /* 最大宽度为屏幕宽度的 90% */
  max-height: 80vh;
  /* 最大高度为视口高度的 80% */
  overflow-y: auto;
  /* 支持滚动 */
  background: white;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.assignee-select-dropdown .el-input {
  width: 100%;
  /* 输入框宽度占满下拉框 */
}

.bug-report-form {
  width: 100%;
  max-width: 1200px;
  /* 或您需要的最大宽度 */
}

.wide-item :deep(.el-form-item__content) {
  width: 100%;
}

.wide-item :deep(.rich-editor) {
  width: 100%;
}

.boxShadow {
  box-shadow: var(--el-box-shadow-light);
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 236 255 / var(--tw-bg-opacity, 1));
}

.border-color-blue {
  border: 1px solid #409eff;
}

.bug-content {
  height: 555px;
  overflow: auto;
}

.bug-title {}

.bug-title h3 {
  font-size: 1.3rem;
  line-height: 1.5rem;
  color: #000;
  font-weight: 700;
  margin: 10px 0;
}

.bug-info {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  line-height: 25px;
  margin-bottom: 10px;
}

.bug-info b {
  color: #000;
}

.bug-describe {
  background: #fff;
  border-radius: 8px;
  padding: 10px;
  line-height: 25px;
  margin-bottom: 10px;
  margin-right: 10px;
}

.bug-describe h3 {
  font-size: 18px;
  color: #000;
  font-weight: 700;
}

.bug-describe h3::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #3b82f6;
  border-radius: 2px;
  margin-right: 10px;
  position: relative;
  top: 1px;
}

.page-shade {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  overflow: hidden;
}

.img-big {
  padding: 20px;
  height: 100vh;
  overflow: auto;
  cursor: pointer;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.img-big img {
  cursor: pointer;
  vertical-align: middle;
  max-width: 80%;
  max-height: 80%;
}
</style>
